<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="货物状态" prop="shopState">
        <el-select v-model="form.shopState" disabled placeholder="请选择货物状态">
          <el-option label="未收到货" value="0"></el-option>
          <el-option label="已收到货" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退款原因" prop="refundCaseid">
        <el-select v-model="form.refundCaseid" placeholder="请选择退款原因">
          <el-option v-for="o in refundCase" :label="o.name" :value="o.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退款金额" prop="money">
        <el-col :span="7">
          <el-input readonly v-model="form.money"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="补充描述 最多200字">
        <el-input rows="5" type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="上传图片(最多3张)">
        <el-upload
          list-type="picture-card"
          action="#"
          :limit="3"
          :auto-upload="false"
          :accept="accept"
          :on-change="changeImag"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :before-remove="beforeRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "AddReturnShop",
    data() {
      return {
        form: {
          odId: "",
          uid:sessionStorage.getItem("id"),
          shopState: "",
          refundCaseid: "",
          money: "",
          remark: "",
        },
        refundCase: [],
        accept: ".jpg,.png",//上传格式限制
        fileList: [],//保存文件数据
        rules: {
          //表单规则
          shopState: [{required: true, message: '请选择货物状态', trigger: 'change'}],
          refundCaseid: [{required: true, message: '请选择退款原因', trigger: 'change'}],
          money: [
            {required: true, message: '请输入退货金额', trigger: 'blur'},
            {
              pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
              message: '请输入正确金额格式,可保留两位小数'
            },
          ],
        }
      }
    },
    methods: {
      getCase() {
        //获取退款原因
        this.$axios.get("returnCase/returnCase.action/" + this.form.shopState)
          .then(res => {
            this.refundCase = res.data;
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      getDetail() {
        //获取订单详情
        this.$axios
          .get("queryDeatilById2.action/" + this.form.odId)
          .then(res => {
            this.form.money = res.data.detail.sumPrice;
            this.form.shopState=res.data.shopState;
            this.getCase();
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      cancel() {
        this.$parent.$parent.dialogVisible2 = false;
        this.$refs["form"].resetFields();
      },
      changeImag(file, fileList) {
        //获取文件信息
        this.fileList = fileList;
      },
      handleExceed(files, fileList) {
        //文件超过3个时
        this.$message.warning(`当前限制选择 3 个文件，本次已选择了${fileList.length} 个文件`)
      },
      beforeRemove(file, fileList) {
        //移除图片时
        this.fileList = fileList;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var formData = new FormData();
            //组装普通数据
            Object.keys(this.form).forEach((key) => {
              formData.append(key, this.form[key]);
            });
            //组装文件数据
            this.fileList.forEach(item => {
              formData.append('imgs', item.raw)
            });
            //异步提交需要等待时间
            this.sendFile(formData);
          } else {
            this.$message.error('表单有误');
            return false;
          }
        });
      },
      sendFile(data) {
        this.$axios({
          method: 'post',
          url: "refund.action",
          data: data,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
          .then(res => {
            if (res.data.code>0){
              this.$message.success(res.data.msg);
              this.cancel();
              this.$parent.$parent.getOrders();
            }else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(err => {
            this.$message.error(err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
